:root {
  --a-color:#D8BFD8;
  --b-color:#E0FFFF;
  --c-color:#909090;
  --d-color:#D8D8D8;
  --e-color:#404040;
}
[data-theme="dark"] {
  --a-color:#886F88;
  --b-color:#90AFAF;
  --c-color:#505050;
  --d-color:#505050;
  --e-color:#EFEFEF;
}
html {
  height:100svh;
}
body {
  margin:0;
  width:100svw;
  height:100svh;
  background:linear-gradient(to bottom right,var(--a-color),var(--b-color)) no-repeat left top;
  background-attachment:fixed;
}
ul {
  list-style-type:none;
  margin:0;
  padding:0;
  width:100svw;
  background-color:var(--c-color);
}
ul img {
  float:left;
}
ul li {
  text-align:center;
  cursor:default;
  float:left;
  display:block;
  color:blue;
  background-color:var(--c-color);
  width:30%;
  border-right:3px solid #ddd;
}
ul li:last-child {
  color:var(--e-color);
  text-align:right;
  border-right:none;
}
ul li:hover {
  color:yellow;
}
@keyframes gradient-shift {
  0% {
    background-position:0% 50%;
  }
  50% {
    background-position:100% 50%;
  }
  75% {
    background-position:50% 100%;
  }
  100% {
    background-position:0% 50%;
  }
}
a {
  position:relative;
  text-decoration:none;
}
h1 {
  margin:0;
}
a i {
  position:relative;
  left:40%;
  background:linear-gradient(45deg,#f9d423,#ff4e50,#7b4397,#00c6ff);
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradient-shift 8s ease infinite;
  transition:left 1s;
}
a i:after {
  -webkit-text-fill-color:blue;
  content:"官方文档»";
  text-decoration:underline;
  opacity:0;
  top:0;
  right:-100px;
  transition:right 0.5s,opacity 0.5s;
}
a:hover i {
  left:35%;
}
a:hover i:after {
  opacity: 1;
  right: 0;
}
form {
  height:100%;
  width:100%;
}
.l-n {
  font-size:2rem;
}
.l-t {
  transform:scale(2.0);
  font-size:1.5rem;
}
.rainbow {
  width:30%;
  height:5%;
  padding:5px 12px;
  font-size:1rem;
  font-family:"Arial", sans-serif;
  color:#333;
  outline:none;
  border:3px solid transparent;
  background:linear-gradient(white,white) padding-box,
             linear-gradient(45deg,#ff7eb3,#65d9ff,#c7f464,#ff7eb3) border-box;
  border-radius:10px;
  transition:background 0.3s ease,box-shadow 0.5s ease;
}
.rainbow:hover {
  background:linear-gradient(white,white) padding-box,
             linear-gradient(135deg,#ff0076,#1eaeff,#28ffbf,#ff0076) border-box;
  box-shadow:0 0 5px rgba(255,0,118,0.3),0 0 20px rgba(30,174,255,0.3);
}
.rainbow:focus {
  background:linear-gradient(white,white) padding-box,
             linear-gradient(45deg,#ff0076,#1eaeff,#28ffbf,#ff0076) border-box;
  box-shadow:0 0 15px rgba(255,0,118,0.6),0 0 25px rgba(30,174,255,0.6);
}
#p-r {
  color:var(--e-color);
  background-color:var(--d-color);
}
#b-p {
  color:white;
  background-color:green;
  font-size:1.5rem;
  height:max(75px, 10%);
  border:10px outset green;
  border-radius:15%;
  padding:0px;
  animation:clrmove 18s infinite;
  transition:border 1s;
}
@keyframes clrmove {
  50% {color:green;background-color:PaleGoldenRod;}
}
#b-p:hover {
  border:5px outset chartreuse;
}
#b-n {
  position:relative;
  color:white;
  background-color:green;
  font-size:1.5rem;
  height:20%;
  border:10px outset green;
  border-radius:100%;
  animation:clrmove 18s infinite;
  transition:border 1s;
}
#b-n:hover {
  border:5px outset chartreuse;
}
#offline {
  width:100svw;
  height:100svh;
}
#online {
  width:100svw;
  height:100svh;
}